<template>
      <div class="time" v-if="skeleton">
          <div class="title" >
             <p> <img src="/img/common/daojishi.png" alt="" style="width: 1.5rem  ">时间沙漏</p>
              <ul class="dot">
                  <li></li>
                  <li></li>
                  <li></li>
              </ul>
          </div>
          <ul class="progress">
             <ProgressBar  :time="time.day" :backgrounds="'#E06969FF'">今日已过去{{times.date}}小时</ProgressBar>
             <ProgressBar  :time="time.week" :backgrounds="'#e3be8e'">本周已过去{{times.week}}天</ProgressBar>
             <ProgressBar  :time="time.mont" :backgrounds="'#8ECAE3FF'">本月已过去{{times.month}}天</ProgressBar>
             <ProgressBar  :time="time.year" :backgrounds="'#99e38e'">今年已过去{{times.year-1}}个月</ProgressBar>
          </ul>
      </div>
      <div v-else class="circle_box">
          <CircleLoading></CircleLoading>
      </div>


</template>

<script>
import ProgressBar from "@/components/home/ProgressBar.vue";
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";
export default {
    name: "Countdown",
    components:{
        CircleLoading,
        ProgressBar,
    },
    data(){
        return{
            time:{
                mont:"",
                day:"",
                week:"",
                year:"",
            },
            times:{
                week:"",
                month:"",
                date:"",
                year:"",
            },
            skeleton:false,
        }
    },
    mounted() {
        let data = new Date();
        let times =  60*60*24; //一天的秒数
        this.times.year = data.getMonth()+1;
        this.times.month = data.getDate()-1;
        this.times.week =  data.getDay() === 0 ? 6 : data.getDay();
        this.times.date = data.getHours();
        this.time.day = ((this.times.date / 24)*100).toFixed(0);  //今日已过去
        let month ="";
        switch (2){
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12: month=31; break;
            case 4:
            case 6:
            case 9:
            case 11: month=30; break;
            case 2:
                if((data.getFullYear()%400==0) || (data.getFullYear()%4==0 && data.getFullYear() %100!=0))
                month=29;
                else  month=28;
                break;
        }
        // 518400 604800
        this.time.mont = ((this.times.month  / month)*100).toFixed(0); //本月已过去
        this.time.week = (((this.times.week*times)+(this.times.date*60*60)) / (7*times) * 100).toFixed(0); // 本周已过去
        this.time.year = ((this.times.year*29*times) / (times * 365)*100    ).toFixed(0);
        this.circle();
    },
    methods:{
        circle(){
            setTimeout(()=>{
                this.skeleton = true;
            },200)
        }
    }
}
</script>

<style scoped>
.circle_box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    border-radius:5px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: rgba(246, 247, 248, 0.7);
}
.time{
    border-radius: 5px;
    background: white;
    color: #8f8c8c;
    padding: 10px 10px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.title p{
    display:flex ;
    justify-content: space-between;
    align-items: center;


}
   .time .title{
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 10px 10px;
   }
   .time .progress{
       list-style: none;
   }
   .progress li{
       margin-bottom: 5px;
   }
   .dot{
       display: flex;
       justify-content: center;
       align-items: center;
       list-style: none;
   }
   .dot li{
       width: 0.8rem;
       height: 0.8rem;
       border-radius: 50%;
       background: #5b77cb;
       margin-right: 5px;
   }
   .dot li:first-child{
       background: #d06060;
   }
   .dot li:nth-child(2){
       background: #7cd060;
   }
   .dot li:last-child{
       background: #cea268;
   }
   .progress_bar{
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-radius: 10px;
   }
.progress_bar_length_back{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height:0.7rem ;
    background: #cb5b5b;
    border-radius: 10px;
    margin-right: 5px;
    margin-top: 2px;
}
   .progress_bar_length{
       width: 20%;
       height:0.7rem ;
       background: #5b77cb;
       border-radius: 10px;
   }
</style>